<template>
    <div id="teamPage">
        <form action="/">
            <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch" />
        </form>
        <van-tabs v-model:active="active" @change="onTabChange">
            <van-tab title="公开" name="public" />
            <van-tab title="加密" name="private" />
        </van-tabs>
        <div style="margin-bottom: 16px;"></div>
        <van-button class="add-button" type="primary" icon="plus" @click="doJoinTeam" />
        <team-card-list :teamList="teamList"/>
        <van-empty v-if="teamList?.length < 1" description="数据为空" />
    </div>
</template>

<script setup lang="ts">
    import { showFailToast } from "vant/lib/vant.es";
    import { onMounted, ref } from 'vue';
    import { useRouter } from 'vue-router'
    import myAxios from '../plugins/myAxios';
    import TeamCardList from "../components/TeamCardList.vue";

    const router = useRouter();
    // 跳转到加入队伍页
    const doJoinTeam =() =>{
        router.push({
            path: "/team/add"
        })
    }
    
    const teamList = ref([]);
    /**
     * 搜索队伍
     * @param val
     * @returns {Promise<void>}
     */
    const listTeam = async (val = '', status=0) => {
        const res = await myAxios.get("/team/list", {
            params: {
                searchText: val,
                pageNum: 1,
                status,
            },
        });
        if (res?.code === 0) {
            teamList.value = res.data;
        } else {
            showFailToast('加载队伍失败，请刷新重试');
        }
    }


    onMounted(async () => {
        listTeam();
    })

    const onSearch = (val) => {
        listTeam(val);
    }

    const active = ref('public');
    const searchText = ref('');

    /**
     * 切换查询状态
     * @param name
     */
    const onTabChange = (name) => {
        // 查公开
        if(name === 'public') {
            listTeam(searchText.value, 0);
        } else {
            // 查加密
            listTeam(searchText.value, 2);
        }
    }
</script>

<style scoped>

</style>
